import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

// 要切换的页面，不要引到父组件
// 要引导路由文件里面
import Hot from "../pages/Hot.vue";
import Cinema from "../pages/Cinema.vue";
import Wait from "../pages/Wait.vue";
import Wait2 from "../pages/Wait2.vue";
import Detail from "../pages/Detail.vue";
import NotFound from "../pages/NotFound.vue";

import Hot1 from "../pages/Hot1.vue";
import Hot2 from "../pages/Hot2.vue";
import Hot3 from "../pages/Hot3.vue";

const router = createRouter({
  // 历史模式路由
  // 看起来更漂亮，对SEO也更友好
  // 当没有进行任何处理，并且项目放到了服务器上以后，会出现刷新404的问题
  history: createWebHistory(import.meta.env.BASE_URL),

  // 哈希模式路由（在url上面，会多一个#号）
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      // 重定向
      // 当匹配到"/"的时候，自动跳转到"/hot"
      path: "/",
      redirect: "/hot",
    },
    {
      path: "/hot",
      component: Hot,
      // 嵌套路由
      children: [
        // {
        //   path: "/hot",
        //   redirect: "/hot/hot1",
        // },
        {
          path: "/hot/hot1",
          // path: "/hot1",
          component: Hot1,
        },
        {
          path: "/hot/hot2",
          // path: "/hot2",
          component: Hot2,
        },
        {
          path: "/hot/hot3",
          // path: "/hot3",
          component: Hot3,
        },
      ],
    },
    {
      path: "/cinema",
      component: Cinema,
      name: "cinema",
    },
    {
      path: "/wait",
      // alias表示页面别名(一个页面对应两个url)
      alias: "/daiying",
      // component: Wait,
      // 命名视图
      components: {
        Wait,
        Wait2,
      },
    },
    {
      // 动态路由匹配
      path: "/detail/:id",
      component: Detail,
      name: "detail",
      // 加上props: true，那么就可以在Detail页面里面用props接收到id属性了
      props: true,
    },
    {
      // 404路由
      path: "/:pathMatch(.*)*",
      component: NotFound,
      // redirect: "/hot",
    },
  ],
});

export default router;
